
import wxCharts from '../../common/wxcharts-min.js'
var lineChart = null;
var startPos = null;
var data = [];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasType: "no_ative", //canvas 绘制展示
    canvasType: "no_ative", //canvas 绘制展示
    title_look: "拖动图标查看→",
    startXY: {
      x: 0,
      y: 0
    }, // 开始坐标
    endXY: {
      x: 0,
      y: 0
    }, // 结束坐标
    page: false,
    styles: "",
    select_index: 0,
    serivece: [],
    seriesData: [],
    pageNumber: 5,
    pageSize: 1,
    canvasLength: 0, // 数据总页数
    maxNum: 0, // 当前统计图最大数据
  },
  touchHandler: function (e) {
    lineChart.scrollStart(e);
    let startXY = {
      x: e.changedTouches[0]['x'],
      y: e.changedTouches[0]['y']
    }
    this.setData({
      startXY: startXY
    })

  },
  moveHandler: function (e) {
    lineChart.scroll(e);
  },
  touchEndHandler: function (e) {
    // let endXY = {
    //   x: e.changedTouches[0]['x'],
    //   y: e.changedTouches[0]['y']
    // }
    // if (this.data.startXY['x'] == endXY['x'] && this.data.startXY['y'] == endXY['y']) {
    //   let $problem_id = JSON.stringify(this.data.canvasList[lineChart.getCurrentDataIndex(e) + ((this.data.pageSize - 1) * 5)]);
    //   let $data = [this.data.select_index, this.data.marketing_item]
    //   wx.navigateTo({
    //     url: '/pages/statisticsDetail/statisticsDetail?id=' + $problem_id + '&index=' + $data[0] + '&marketing_item=' + $data[1],
    //   })
    // } else {
    //   if (this.data.startXY['x'] > endXY['x']) {
    //     // 判断是否是第一页数据
    //     if (this.data.pageSize > this.data.canvasLength) {
    //       wx.showToast({
    //         title: '暂无更多数据',
    //         icon: "none"
    //       })
    //       return;
    //     }
    //     this.setData({
    //       pageSize: this.data.pageSize + 1
    //     })
    //     this.canvas_chartData(
    //       this.data.serivece.slice((this.data.pageSize - 1) * 5,
    //         this.data.pageSize * this.data.pageNumber), this.data.seriesData.slice((this.data.pageSize - 1) * 5,
    //           this.data.pageSize * this.data.pageNumber))
    //   } else
    //     if (this.data.startXY['x'] < endXY['x']) {
    //       if (this.data.pageSize == 1) {
    //         wx.showToast({
    //           title: '已更新为第一页数据',
    //           icon: "none"
    //         })
    //         return;
    //       }
    //       this.setData({
    //         pageSize: this.data.pageSize - 1
    //       })
    //       this.canvas_chartData(this.data.serivece.slice((this.data.pageSize - 1) * 5, this.data.pageSize * this.data.pageNumber), this.data.seriesData.slice((this.data.pageSize - 1) * 5, this.data.pageSize * this.data.pageNumber))
    //     }
    // }

    lineChart.scrollEnd(e);
    lineChart.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
  /**
 *   统计图数据结构及事件处理
 */
  canvas_chartData: function (categoriesData, seriesData) {
    console.log("调用")
    var windowWidth = 300;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    if (categoriesData.length > 0 && seriesData.length > 0) {

      lineChart = new wxCharts({
        canvasId: 'lineCanvas',
        type: 'column',
        categories: categoriesData,
        animation: true,
        series: [{
          name: '成交量1',
          data: seriesData,
          format: function (val) {
            console.log('val', val)
            return val.toFixed(2) + '件';
          }
        }],
        // xAxis: {    // X轴配置
        //     //  disableGrid: true ,  //是否绘制X轴网格
        //     //  type: 'calibration',  //可选值calibration(刻度) 默认为包含样式
        //  //  gridColor:'#000',    // 修改刻度尺样式
        //   //是否隐藏x轴分割线
        //  //  disableGrid: false,

        //   //X轴数据点颜色
        //  // fontColor: '#6EB9FF',   // 修改字体颜色
        //   type: 'category',
        //   // data: weekDay,
        //   axisLabel: {
        //     show: true,
        //     textStyle: {
        //       color: '#fff'    //这里用参数代替了
        //     }
        //   },
        //   fontColor: 'red',
        //   titleFontColor:'red'
        // },
        // yAxis: {
        //     title: '成交金额 (万元)',
        //   titleFontColor:'#6EB9FF',
        //   disabled :false,
        //   fontColor:'red',
        //     format: function (val) {
        //         return val.toFixed(2);
        //     },
        //     min: 0
        // },
        yAxis: {
          format: function (val) {
            return parseInt(val.toFixed(2) + 1) + '';
            // return Math.round(val);
          },
          min: 0,         // 最小值
          max: 10,        // 最大值
          fontColor: '#000000',
          gridColor: '#000000',
          titleFontColor: '#000000',
          topTitleFontColor: "#000000",
          disabled: false,
          type: 'calibration'
        },
        xAxis: {
          fontColor: '#000000',
          gridColor: '#000000',
          disabled: false
        },
        width: windowWidth,
        height: 200,
        dataLabel: true, // 是否显示图标里面的数据
        dataPointShape: false, // 是否在图表中显示数据点图形标识
        enableScroll: true, // 是否开启拖动
        extra: {
          lineStyle: '#000000',
          legendTextColor: '#6EB9FF'
        },
        title: {
          name: "8888",
          color: '#000000'
        },
        legend: false, // 图标下方标识
        subtitle: {
          color: '#000000'
        }
      });
    } else {
      wx.showToast({
        title: '暂无更多数据',
        icon: "none"
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.canvas_chartData([1, 2, 3, 4, 5], [11, 22, 33, 44, 55, 66])
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})